<template>
  <!--ASN明细-->
  <div id="AsnDetails">
    <v-details :detailData="data.detailData" :inputConfig="inputConfig" :rules="rules" @pop="setdata"></v-details>
  </div>
</template>

<script>
import details from 'commons/Detail'
import baseMixin from '@/mixins/BaseMixin'

export default {
  name: 'AsnDetails',
  mixins: [baseMixin],
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      inputConfig: [
        [
          {
            type: 'input',
            label: this.$t('outbound.userlinenumber'),
            disabled: true,
            props: 'orderlinenumber'
          },
          {
            type: 'input',
            label: this.$t('out.externlineno'),
            disabled: true,
            props: 'externlineno'
          },
          {
            type: 'table',
            label: this.$t('config.shipper'),
            disabled:
              !this.$store.state.newFlag && !this.$store.state.detailsNew,
            props: 'storerkey',
            tableConfig: [
              {
                label: this.$t('config.shipper'),
                prop: 'storerkey',
                input: 'input'
              },
              {
                label: this.$t('config.company'),
                prop: 'company',
                input: 'input'
              },
              {
                label: this.$t('config.city'),
                prop: 'city',
                input: 'input'
              },
              {
                label: this.$t('config.provice'),
                prop: 'state',
                input: 'input'
              },
              {
                label: this.$t('config.postcode'),
                prop: 'zip',
                input: 'input'
              },
              {
                label: this.$t('config.contact'),
                prop: 'contact',
                input: 'input'
              },
              {
                label: this.$t('config.phone'),
                prop: 'phone',
                input: 'input'
              }
            ],
            url: `queryStorer/1/?/${this.$store.state.wms}`
          },
          {
            type: 'table',
            label: this.$t('config.sku'),
            disabled:
              !this.$store.state.newFlag && !this.$store.state.detailsNew,
            props: 'sku',
            tableConfig: [
              {
                label: this.$t('config.sku'),
                prop: 'sku',
                input: 'input'
              },
              {
                label: this.$t('common.desc'),
                prop: 'descr',
                input: 'input'
              },
              {
                label: this.$t('config.shipper'),
                prop: 'storerkey',
                input: 'input'
              },
              {
                label: this.$t('config.packaging'),
                prop: 'packkey',
                input: 'input'
              },
              {
                label: this.$t('config.boxGroup'),
                prop: 'cartongroupdescr',
                input: 'select',
                options: this.getOptions('queryCartonizationDropDown')
              },
              {
                label: this.$t('config.allocaStrategy'),
                prop: 'strategykeydescr',
                input: 'select',
                options: this.getOptions('queryAllocatestrategyDropDown')
              },
              {
                label: this.$t('config.putawayStrategy'),
                prop: 'putawaystrategykeydescr',
                input: 'select',
                options: this.getOptions('queryPutawaystrategyDropDown')
              },
              {
                label: this.$t('config.batchValidate'),
                prop: 'lottablevalidationkeydescr',
                input: 'select',
                options: this.getOptions('queryLottablevalidationDropDown')
              },
              {
                label: this.$t('config.area'),
                prop: 'putawayzonedescr',
                input: 'select',
                options: this.getOptions('queryPutawayzoneDropDown')
              }
            ],
            filterKey: ['descr', 'sku'],
            filterUrl: `fuzzyQuerySkuByItemNumberAndName/undefined`,
          url: `querySkuOfStorerkey/?/${this.$store.state.wms}/undefined`,
          },
          {
            type: 'input',
            label: this.$t('common.desc'),
            disabled: true,
            props: 'skudescr'
          },
          {
            type: 'select',
            label: this.$t('config.packaging'),
            disabled: false,
            props: 'packkey',
            options: this.getOptions('queryPackDropDown')
          },
          {
            type: 'select',
            label: this.$t('config.measureUnit'),
            disabled: false,
            props: 'uom',
            options: []
          },
          {
            type: 'input',
            label: this.$t('out.sequence'),
            disabled: false,
            props: 'sequence'
          },
          {
            type: 'input',
            label: this.$t('out.ftqtyprocessed'),
            disabled: false,
            props: 'ftqtyprocessed'
          }
        ],
        [
          {
            type: 'select',
            label: this.$t('common.status'),
            disabled: true,
            props: 'status',
            options: this.getOptions('queryOrderStatusDropDown')
          },
          {
            type: 'input',
            label: this.$t('out.qtypreallocated1'),
            disabled:
              !this.$store.state.newFlag && !this.$store.state.detailsNew,
            props: 'qtypreallocated'
          },
          {
            type: 'input',
            label: this.$t('out.qtyallocated'),
            disabled: true,
            props: 'qtyallocated'
          },
          {
            type: 'input',
            label: this.$t('in.surplusqty'),
            disabled: false,
            props: 'openqty'
          },
          {
            type: 'input',
            label: this.$t('outbound.qtypicked'),
            disabled: true,
            props: 'qtypicked'
          },
          {
            type: 'input',
            label: this.$t('out.shippedqty'),
            disabled: true,
            props: 'shippedqty'
          },
          {
            type: 'input',
            label: this.$t('out.originalqty'),
            disabled: true,
            props: 'originalqty'
          },
          {
            type: 'select',
            label: this.$t('in.returnreason'),
            props: 'shortshipreason',
            options: this.getOptions('querycodeLkup/SHORTRSNS')
          },
          {
            type: 'input',
            label: this.$t('out.ftqtyremaining'),
            disabled: true,
            props: 'ftqtyremaining'
          }
        ],
        [
          {
            type: 'input',
            label: this.$t('out.cartonbreak'),
            disabled: true,
            props: 'cartonbreak'
          },
          {
            type: 'input',
            label: this.$t('out.cartonqtybreak'),
            disabled: false,
            props: 'cartonqtybreak'
          },
          {
            type: 'select',
            label: this.$t('in.qcrequired'),
            disabled: false,
            props: 'oqcrequired',
            options: []
          },
          {
            type: 'select',
            label: this.$t('in.qcautoadjust'),
            disabled: false,
            props: 'oqcautoadjust',
            options: []
          },
          {
            type: 'input',
            label: this.$t('out.minshippercent'),
            disabled: false,
            props: 'minshippercent'
          },
          {
            type: 'input',
            label: 'Flow Thru License Plate Required',
            disabled: false,
            props: 'idrequired'
          },
          {
            type: 'input',
            label: this.$t('out.convertedqty'),
            disabled: false,
            props: 'convertedqty'
          },
          {
            type: 'input',
            label: this.$t('out.baseorderkey'),
            disabled: false,
            props: 'baseorderkey'
          }
        ],
        [
          {
            type: 'select',
            label: this.$t('out.shipgroup', { no: 1 }),
            disabled: false,
            props: 'shipgroup01',
            options: this.getOptions('querycodeLkup/YESNO')
          },
          {
            type: 'select',
            label: this.$t('out.shipgroup', { no: 2 }),
            disabled: false,
            props: 'shipgroup02',
            options: this.getOptions('querycodeLkup/YESNO')
          },
          {
            type: 'select',
            label: this.$t('out.shipgroup', { no: 3 }),
            disabled: false,
            props: 'shipgroup03',
            options: this.getOptions('querycodeLkup/YESNO')
          },
          {
            type: 'input',
            label: this.$t('out.tariffkey'),
            disabled: false,
            props: 'tariffkey'
          },
          {
            type: 'input',
            label: this.$t('out.stageloc'),
            disabled: false,
            props: 'stageloc'
          }
        ]
      ],
      rules: {
        orderlinenumber: [{ required: true, trigger: 'blur' }],
        storerkey: [{ required: true, trigger: 'blur' }],
        sku: [{ required: true, trigger: 'blur' }],
        packkey: [{ required: true, trigger: 'blur' }],
        uom: [{ required: true, trigger: 'blur' }],
        status: [{ required: true, trigger: 'blur' }],
        openqty: [{ required: true, trigger: 'blur' }],
        cartonbreak: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  methods: {
    setdata(data, id, close) {
      if (id == '2') {
        this.data.detailData.storerkey = data.storerkey
      } else if (id == '3') {
        this.data.detailData.sku = data.sku
        this.data.detailData.packkey = data.packkey
        this.data.detailData.skudescr = data.descr
        this.data.detailData.newallocationstrategy = data.newallocationstrategy
        this.data.detailData.preallocatestrategykey =
          data.preallocatestrategykey
        this.data.detailData.allocatestrategykey = data.allocatestrategykey
      }
      close(false)
    }
  },
  mounted() {},
  watch: {
    '$parent.$parent.$refs.detail.detailData.storerkey': {
      handler(data) {
        this.data.detailData.storerkey = data
      },
      deep: true,
      immediate: true
    },
    'data.detailData.storerkey': {
      handler(data) {
        this.inputConfig[0].forEach(item => {
          if (item.props == 'sku') {
            item.filterUrl = "fuzzyQuerySkuByItemNumberAndName/" + data;
            item.url = "querySkuOfStorerkey/?/wmwhse1/" + data;
          }
        })
      },
      deep: true,
      immediate: true
    },
    'data.detailData.packkey': {
      handler(data) {
        this.inputConfig[0].forEach(item => {
          if (item.props == 'uom') {
            item.options = this.getOptions(`queryFfdefaultuomDropDown/${data}`)
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  components: {
    'v-details': details
  }
}
</script>

<style scoped>
</style>
